<template>
    <div>
        <el-card class="box-card">
            <div>
                <span>系统名</span>
                <el-select v-model="systemId" placeholder="请选择" @change="getMenu">
                    <el-option
                    v-for="item in systemData"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                    </el-option>
                </el-select>
                <!-- <el-button type="primary">刷新</el-button> -->
            </div>
            <div class="content">
                <el-row :gutter="24">
                    <el-col :span="4">
                        <div class="grid-content bg-purple conLeft">
                            <el-tree :data="muneData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                        </div>
                    </el-col>
                    <el-col :span="20">
                        <div class="grid-content bg-purple">
                          <div style="float: left;">
                              <el-button type="primary" @click="toAdd(1)">新增一级栏目</el-button>
                              <el-button type="primary" @click="toAdd(2)">新增二级栏目</el-button>
                          </div>
                          <div>
                              <el-form inline style="display: inline-block; float: right">
                                    <el-form-item label="系统名">
                                       <el-select v-model="systemDataId" placeholder="请选择">
                                        <el-option label="全部" value=0></el-option>
                                        <el-option
                                        v-for="item in systemData"
                                        :key="item.id"
                                        :label="item.title"
                                        :value="item.id">
                                        </el-option>
                                    </el-select>
                                    </el-form-item>
                                    <el-form-item label="栏目名称">
                                        <el-input type="text" placeholder="请输入栏目名称" v-model="columnName" maxlength="11"></el-input>
                                    </el-form-item>
                                    <el-form-item label="启用状态">
                                        <el-select v-model="openStatus" placeholder="请选择">
                                            <el-option label="全部" value=0>
                                            </el-option>
                                            <el-option v-for="(item, index) in openList" :key='index' :label="item.name" :value="item.value">
						                    </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="searchSystm">查询</el-button>
                                    </el-form-item>
                                </el-form>
                          </div>
                          <div>
                              <cvue-table
                                    :option="tableOption"
                                    :data="tableData"
                                    ref="tbl1"
                                    :isShowAdd="false"
                                    :page="page"
                                    :tablePage="tablePage"
                                    :pageSize="page.pageSize"
                                    :loading="tableLoading"
                                    @current-change="handleCurrentChange"
                                    @size-change="handleSizeChange"
                                    :isShowPage="true"
                                    >
                                    <template slot-scope="scope" slot="columnPicture">
                                        <i :class="scope.row.columnPicture"></i>
                                        <!-- <img :src="scope.row.columnPicture" alt=""> -->
                                    </template>
                                    <template slot-scope="scope" slot="isActive">
                                        <span v-if="scope.row.isActive == 1">
                                            是
                                        </span>
                                        <span v-if="scope.row.isActive == 2">
                                            否
                                        </span>
                                    </template>
                                    <!-- 操作按钮 -->
                                    <el-table-column
                                        fixed="right"
                                        slot="actionMenu"
                                        label="操作"
                                        align="center"
                                        header-align="center"
                                        width="200"
                                    >
                                        <template slot-scope="scope" >
                                        <div class="operation">
                                            <el-button type="primary" v-if="!scope.row.parentId" @click="handEdit(scope.row,1)">编辑(一级栏目)</el-button>
                                            <el-button type="primary" v-else @click="handEdit(scope.row,2)">编辑(二级栏目)</el-button>
                                        </div>
                                        </template>
                                    </el-table-column>
                                </cvue-table>
                          </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <!-- 新增栏目 -->
        <add-column v-if="dialogVisibleAdd" @closeDialog="closeDialog('add')" @confirmDialog="confirmDialog('add')" @handleClose="closeDialog('add')" :dialogVisible="dialogVisibleAdd"></add-column>
         <!-- 编辑栏目 -->
         <edit-column @closeDialog="closeDialog('edit')" @confirmDialog="confirmDialog('edit')" @handleClose="closeDialog('edit')" :dialogVisible="dialogVisibleEdit"></edit-column>
    </div>
</template>
<script>
import cvueTable from '@/components/cvue-table'
import addColumn from './addColumn'
import editColumn from './editColumn'
export default {
    components: {
       cvueTable,
       addColumn,
       editColumn
    },
    data () {
      return {
        systemData: [],
        systemId: '',
        systemDataId: '0',
        openStatus: '0',
        openList: [{ name: '启用', value: 1 }, { name: '禁用', value: 2 }],
        columnName: '',
        muneData: [],
        defaultProps: {
          children: 'childColumn',
          label: 'columnName'
        },
        dialogVisibleAdd: false,
        dialogVisibleEdit: false,
         tablePage: 1,
         tableLoading: false,
        page: {
            total: 0, // 总页数
            currentPage: 1, // 当前页数
            pageSize: 10, // 每页显示多少条
            pageSizes: [10, 20, 30, 40, 50]
        },
        tableOption: {
            stripe: true,
            width: '100%',
            border: true,
            index: false,
            cloumn: [
            { prop: 'aggregateMenusTitle', label: '系统名', align: 'center', width: 150 },
            { prop: 'parentColumnName', label: '父级栏目', align: 'center' },
            { prop: 'columnName', label: '栏目', align: 'center' },
            { prop: 'permissionCode', label: '权限码', align: 'center' },
            { prop: 'columnURL', label: '栏目URL', align: 'center' },
            { prop: 'columnPicture', label: 'icon图片', align: 'center', slotStatus: true },
            { prop: 'isActive', label: '启用', align: 'center', slotStatus: true },
            { prop: 'sort', label: '排序', align: 'center' }
            ]
        },
        tableData: [],
        columnType: ''
      }
    },
    mounted () {
        this.getList()
        this.getSystem()
    },
    methods: {
            // 改变pagesize
        handleSizeChange (val) {
        this.page.pageSize = val
        this.getList()
        },
        // 改变页码
        handleCurrentChange (val) {
        this.tablePage = val
        this.getList()
        },
        // 关闭弹窗
		closeDialog (params) {
			if (params == 'add') {
				this.dialogVisibleAdd = false
			}
			if (params == 'edit') {
				this.dialogVisibleEdit = false
			}
		},
		// 确认
		confirmDialog (params) {
			if (params == 'add') {
				this.dialogVisibleAdd = false
				this.page.currentPage = 1
                this.getList()
                this.getMenu()
			}
			if (params == 'edit') {
				this.dialogVisibleEdit = false
                this.getList()
                this.getMenu()
			}
        },
        toAdd (num) {
            if (num == 1) {
                this.$store.state.authority.columnType = 1
            }
            if (num == 2) {
                this.$store.state.authority.columnType = 2
            }
			this.dialogVisibleAdd = true
        },
        handEdit (row, num) {
            if (num == 1) {
                this.$store.state.authority.columnType = 1
            }
            if (num == 2) {
                this.$store.state.authority.columnType = 2
            }
            this.$store.state.authority.editData = row
            this.dialogVisibleEdit = true
        },
        // 获取系统下拉框
        getSystem () {
            this.$store.dispatch('authority/AggregateMenusOptions').then(res => {
               this.systemData = res
               this.$store.state.authority.systemData = res
            }) 
        },
        // 左侧树结构
        getMenu () {
            var params = {
				aggregateMenusId: this.systemId == '' ? 0 : this.systemId
            }
             this.$store.dispatch('authority/ShowChildMenus', params).then(res => {
                this.muneData = res
            })
        },
        handleNodeClick (data) {
            console.log(data)
        },
        // 搜索列表数据
        searchSystm () {
			this.tablePage = 1
			this.getList()
        },
        getList () {
            var params = {
                aggregateMenusId: this.systemDataId,
                ColumnName: this.columnName,
                IsActive: this.openStatus,
                pageIndex: this.tablePage,
				pageSize: this.page.pageSize
            }
             this.$store.dispatch('authority/ChildMenusList', params).then(res => {
                this.tableData = res.items
                this.page.total = res.totalCount
                this.page.currentPage = this.tablePage
            })
        }
    }
}
</script>
<style scoped>
.content{
    margin-top: 20px;
}
.conLeft{
    border-right: 1px solid #EBEEF5;
}
</style>
